<template>
  <div class="layout layout-100">
    <Layout class="layout-100">
      <Header class="header-cont main__title--top">{{this.$route.params.name}}</Header>
      <Content class="content-cont">
        <Table
          border
          ref="selection"
          :columns="columns"
          :data="listData"
           @on-selection-change="selectChangeRiado"
        >
          <template slot-scope="{ row, index }" slot="action">
            <span
              title="详情"
              class="button-class"
              type="text"
              @click="destroyBtn(row)" >详情</span>
          </template>
          <template slot-scope="{ row, index }" slot="status">
            <span
              v-if="row.status==='PASS'"
              style="color: #3BBB0A">{{row.statusName}}</span> <!--通过-->
            <span
              v-if="row.status==='REJECT'" style="color: #EE4044">{{row.statusName}}</span><!--驳回-->
            <span
              v-if="row.status==='ENTERPRISE_READY'
              || row.status === 'PROJECT_READY'
              || row.status === 'GROUP_READY'
            " style="color: #E7B167">{{row.statusName}}</span> <!--待审-->
            <span v-if="row.status==='PROJECT_ALREADY' || row.status==='ENTERPRISE_ALREADY'" style="color: #3170C8">{{row.statusName}}</span> <!--已审-->
          </template>
        </Table>
      </Content>
    </Layout>
    <Modal
      v-model="detailModal"
      width="70%"
      class="modal"
      title="详情">
      <div class="modal-content">
        <Tabs value="0" @on-click="tabpaneBtn">
          <TabPane label="风险信息" name="0">
            <Form :show-message="false" label-position="top" >
              <Row>
                <Col span="12">
                  <FormItem label="公司名称">
                    <Input class="width90" v-model.trim="detailData.orgName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="项目名称" >
                    <Input class="width90" v-model.trim="detailData.proName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点名称">
                    <Input class="width90" v-model.trim="detailData.pointName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="工点风险等级">
                    <Input class="width90" v-model.trim="detailData.distRiskGradeName"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="起始时间">
                    <Input class="width90" v-model.trim="detailData.startTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="结束时间">
                    <Input class="width90" v-model.trim="detailData.endTime" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="当月是否作业">
                    <Input class="width90" v-model.trim="detailData.isWorkedThisMonth" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工点描述">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.note" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险名称">
                    <Input class="width90" v-model.trim="detailData.riskOperationName"  readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险类型">
                    <Input class="width90" v-model.trim="detailData.riskCategoryNames" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="作业风险等级">
                    <Input class="width90" v-model.trim="detailData.riskLevelName" readonly/>
                  </FormItem>
                </Col>
                <Col span="12">
                  <FormItem label="分级方法">
                    <Input class="width90" v-model.trim="detailData.classificationMethodName" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="具体风险描述">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskDescription" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="工程公司管控要求">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlRequirementOne" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="集团公司管控要求">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlRequirementTwo" readonly/>
                  </FormItem>
                </Col>
                <Col span="24">
                  <FormItem label="目前该风险安全控制情况">
                    <Input style="width: 95%" type="textarea" v-model.trim="detailData.riskControlDetailOne" readonly/>
                  </FormItem>
                </Col>
              </Row>
            </Form>
          </TabPane>
          <TabPane label="措施信息" name="1">
            <Table
              border
              ref="selection"
              :columns="columns2"
              :data="measuresList"
            >
            </Table>
          </TabPane>
          <TabPane label="审核进度" name="2">
            <!--<div class="process-recent">{{ processModel.yourMessage }}</div>-->
            <Timeline>
              <TimelineItem
                color="blue"
                v-for="(item, index) in recordList"
                :key="index"
              >
                <Icon type="ios-radio-button-on" slot="dot" />
                <div class="process-container">
                  <h4 class="process-title">
                    {{ item.titleName }}：<span
                    :class="'通过' == item.result ? 'audit--success' : 'audit--danger'"
                  >{{ item.result }}</span
                  >
                  </h4>
                  <div class="process-list">
                    <Row
                      :gutter="32"
                      type="flex"
                      v-for="(row, innerIndex) in item.recordList"
                      :key="innerIndex"
                    >
                      <Col :md="8" :lg="5" :xl="4" :xxl="3">
                        <span class="process-name">{{ row.operatorName }}</span>
                        <span class="process-position" v-if="row.operatorPost">
                      （{{ row.operatorPost }}）
                    </span>
                      </Col>
                      <Col>
                        于
                      </Col>
                      <Col>
                        <strong>{{ row.operationTime }}</strong>
                      </Col>
                      <Col>
                        <span v-if="index > 0">进行</span>
                        <strong>{{ row.serviceTypeName }}</strong>
                      </Col>
                      <Col>
                        {{ row.serviceTypeName }}<strong
                        :class="
                        1 == row.operationResult ? 'audit--success' : 'audit--danger'
                      "
                      >{{ row.operationResultName }}</strong
                      >
                      </Col>
                      <Col v-if="index > 0"
                      >并填写说明：<span>{{ row.comment }}</span>
                      </Col>
                    </Row>
                  </div>
                  <div class="process-angle"></div>
                </div>
              </TimelineItem>
            </Timeline>
          </TabPane>
          <TabPane label="问询回复" name="3">
            <replyInquiries v-if="isReply" :businessType="businessType" :editModel="detailData"></replyInquiries>
          </TabPane>
        </Tabs>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="detailModal=false">取消</Button>
      </div>
    </Modal>
    <Modal v-model="isInquiries" title="业务问询" width="50%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <inquiries ref="isInquiriesBox" :checkedRows="checkedRows" :businessType="businessType" @modelBox="modelBox" @person="person"></inquiries>
      </div>
    </Modal>
    <Modal v-model="personModel" title="选择人" width="80%" ok-text="提交" :footer-hide="true">
      <div class="modal-content">
        <checkPerson @personBox="personBox"></checkPerson>
      </div>
    </Modal>
    <span class="inquiries" @click="replyChild()">问询</span>
  </div>
</template>

<script>
import inquiries from '../../components/modules/inquiries/index'
import checkPerson from '../../components/modules/inquiries/checkPerson'
import replyInquiries from '../../components/modules/inquiries/replyInquiries'
  import { mapMutations } from 'vuex'
  export default {
    components:{
      inquiries,
      checkPerson,
      replyInquiries
    },
    name: "monthly-dynamics-detail",
    data(){
      return {
        isReply:false,
        checkedRows:[],
        businessType:'businesstype_dynamics',
        isInquiries:false,
        personModel:false,
        detailModal:false,
        detailData:'',
        measuresList:[],
        recordList:[],
        listData:[],
        columns:[
            {
             type: 'selection',
             width: 60,
             align: 'center'
           },
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 70
          },
          {
            title: '工点名称',
            key: 'pointName',
            align: 'center',
            width: 150,
          },
          {
            title: '开始时间',
            key: 'startTime',
            align: 'center',
            width: 130,
          },{
            title: '结束时间',
            key: 'endTime',
            align: 'center',
            width: 130,
          },{
            title: '当月是否在施',
            key: 'isWorkedThisMonth',
            align: 'center',
            width: 100,
          },{
            title: '作业风险类型',
            key:'riskCategoryNames',
            align: 'center',
          },{
            title: '作业风险名称',
            key:'riskOperationName',
            align: 'center',
          },{
            title: '作业风险等级',
            key:'riskLevelName',
            align: 'center',
          },{
            title: '状态',
            slot:'status',
            align: 'center',
            width:100,
          },{
            title: '操作',
            width: 100,
            align: 'center',
            slot: 'action'
          }
        ],
        columns2:[
          {
             type: 'selection',
             width: 60,
             align: 'center'
           },
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 70
          },
          {
            title: '管控措施',
            key: 'measures',
            align: 'center',
            width:100,
          },
          {
            title: '项目部管控责任人',
            key: 'projectManagementDepartmentName',
            align: 'center',
          },{
            title: '项目部分管领导',
            key: 'projectManagementLeaderName',
            align: 'center',
          },{
            title: '项目部主管领导',
            key: 'leaderInChargeOfProjectDepartmentName',
            align: 'center',
          },{
            title: '工程公司管理人员',
            key:'controlDepartmentOfEngineeringCompanyName',
            align: 'center',
          },{
            title: '工程公司分管领导',
            key:'leaderInChargeOfEngineeringCompanyName',
            align: 'center',
          },{
            title: '集团公司管理人员',
            key:'groupCompanyControlDepartmentName',
            align: 'center',
          },{
            title: '集团公司分管领导',
            key:'leaderInChargeOfGroupCompanyName',
            align: 'center',
          },{
            title: '措施类型',
            key:'measureTypeName',
            align: 'center',
            width:100,
          },{
            title: '频次',
            key:'frequencyName',
            align: 'center',
          }
        ],
      }
    },
    methods:{
      replyChild(){
        if(this.checkedRows.length > 5){
          this.$Message.warning('最多可选5条风险进行批量问询')
          return 
        }else if(this.checkedRows.length == 0){
            this.$Message.warning('请先选择需要问询的风险')
            return
        }else{
          this.isInquiries = true
          this.$refs.isInquiriesBox.isModel()
        }
      },
      // 关闭问询框
      modelBox(){
        this.isInquiries = false
      },
      // 打开人员选择框
      person(){
        this.personModel = true
      },
      // 关闭人员选择框
      personBox(){
        this.personModel = false
      },
      selectChangeRiado(e) {
        this.checkedRows = e
      },
      ...mapMutations([
        'closeTag'
      ]),
      closetab () {
        this.closeTag({
          name: 'monthly-dynamics-detail',
          params: {...this.$route.params},
          query:{...this.$route.query}
        });
      },
      getRiskOrderDestroydetail(){//信息--列表详情
        this.$api.MonthlyDynamics.getDynamicRiskOrderdetailfirst(this.$route.params.id).then(res => {
          if(res.code === 200){
            this.listData = res.data;
            if(this.listData){
              this.listData.map(val => {
                val.startTime = this.$time(
                  new Date(val.startTime),
                  'yyyy-MM-dd'
                )
                val.endTime = this.$time(
                  new Date(val.endTime),
                  'yyyy-MM-dd'
                )
              })
            }
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      destroyBtn(row){//详情
        this.detailModal = true;
        this.$api.MonthlyDynamics.getDynamicRiskOrderdetailsecond(row.riskOrderId).then(res => {
          if(res.code === 200){
            // if(this.checkedRows.length > 0){
            //   this.checkedRows = []
            // }
            // this.checkedRows.push(res.data)
            this.isReply = true
            this.detailData = res.data;
            this.detailData.startTime = this.$time(
              new Date(this.detailData.startTime),
              'yyyy-MM-dd'
            );
            this.detailData.endTime = this.$time(
              new Date(this.detailData.endTime),
              'yyyy-MM-dd'
            )
            this.measuresList = res.data.measuresList;
            this.recordList = res.data.recordList;
            if(this.recordList){
              this.recordList.map(value => {
                value.operationTime = this.$time(
                  new Date(value.operationTime),
                  'yyyy-MM-dd hh:mm:ss'
                )
              })
            }
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      tabpaneBtn(e){//切换

      },

    },
    mounted() {
      this.getRiskOrderDestroydetail();
    }
  };
</script>

<style scoped>
  .width90{
    width: 90%;
  }
</style>
